<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>距离放学还有<span></span></h1>
		<button>||</button>
		<script type="text/javascript">
			var span=document.querySelector("h1>span");
			var but=document.getElementsByTagName("button")[0];
			dsq();
			timer=setInterval(()=>{
				dsq();
			},1000)
			
			but.onclick=function(){
				if(this.innerHTML=="||"){
					span.innerHTML=span.innerHTML.replace(/\s/g,":");
					clearInterval(timer);
				}else{
					timer=setInterval(()=>{
						dsq();
					},1000)
				}
				this.innerHTML=this.innerHTML=="||"?"|>":"||";
			}
			
			function dsq(){
					var end=new Date("2021/09/03 21:00:00");
					var now=new Date();
					var ms=(end-now)/1000;
					//根据毫秒计算小时
					var h=parseInt(ms/60/60);
					h<10&&(h="0"+h);
					
					var m=parseInt(ms%3600/60);
					m<10&&(m="0"+m);	
					
					var s=parseInt(ms%60);
					s<10&&(s="0"+s);
					
					span.innerHTML=span.innerHTML.indexOf(":")==-1?`${h}:${m}:${s}`:`${h} ${m} ${s}`;
			}			
		</script>
	</body>
</html>
